/**
 * @namespace A loader implemented by pure Canvas
 * @name $.fn.cvloader
 * @author levinhuang
 * @version 1.0beta
 * @requires jQuery
 */
;(function($) {
	// Private functions.
	var p = {};
	p.model=function($d,opts){
		this.opts=opts;
		this.init($d);
	};
	p.model.prototype={
		init:function($d){
			//width and height
			this.height=this.opts.height;
			this.width =(this.opts.txt != null)?(this.height+this.txtHeight): this.height;
			
			//canvas
			this.obj = document.createElement("canvas");
			this.obj.setAttribute("width", this.width);
			this.obj.setAttribute("height", this.height);
			this.ctx = this.obj.getContext("2d");
			// RGB
			this.color = this.opts.color;

			this.ctx.save();
			
			//init text
			this._initText();

			this.ctx.restore();
			
			// 记录转动的度数,分8步
			this.rotation=0;
			this.running=null;//计时器

			this._attach($d);
		},
		draw : function(){
			var h = this.height, 
				ctx = this.ctx, 
				c = h / 16, 
				d = h / 5, 
				//每个花瓣的弧度数。注：180度=3.14弧度
				degree = -Math.PI * 2 / this.opts.numPetal;
			
			ctx.save();
			// clearRect(x,y,width,height) : Clears the specified area and makes it fully transparent
			ctx.clearRect(0, 0, h, h);
			// 移到中点
			ctx.translate(h / 2, h / 2);
			// 把一个圆分成8段,分别绘制
			for (var i = 0; i < this.opts.numPetal; i++) {
				ctx.save();
				// 旋转一段的度数
				ctx.rotate(i * degree); 
				// 根据旋转的角度设置颜色与透明度,eg:
				// rotation=0 的时候, alpha的值 1, 0.875 ... 0.125
				// rotation=1 的时候, alpha的值 0.875, 0.75 ... 1
				ctx.fillStyle = "rgba(" + this.color[0] + "," + this.color[1] + "," + this.color[2] + "," + (this.opts.numPetal - (i + this.rotation) % this.opts.numPetal) / this.opts.numPetal + ")";
				// 绘制 fillRect(x,y,width,height) : Draws a filled rectangle
				ctx.fillRect(-c / 2, d, c, d);
				ctx.restore();
			}
			ctx.restore();
			this.rotation++;
			this.rotation %= this.opts.numPetal;

		},//draw
		start:function(){
			var me=this;
			// 由于分成10段,所以时间为100ms
			this.running=window.setInterval(function(){me.draw();}, 100); 
			me.draw();
		},
		stop:function(){
			window.clearInterval(this.running);
			this.running=null;
		},//stop
		_initText:function(){
			if(!this.opts.txt){
				return;
			}
			this.ctx.fillStyle = this.opts.fillStyle;
			this.ctx.font = this.opts.font;
			this.ctx.textBaseline =this.opts.textBaseline;
			this.ctx.fillText(txt, this.height+5, this.height/2);
		},//_initText
		_attach:function($t){
			$t.prepend(this.obj);
			$t.data("spinner",this);
			if(this.opts.autoRun){
				this.start();
			};
			return this;
		}
	};

	/** 
	 * cvloader插件主体
	 * @public
	 * @function
	 * @name $.fn.cvloader
	 * @param {Object} opts 配置对象
	 * @example
	 * $("#test").cvloader({color:[52,52,52]});
	 */
	$.fn.cvloader = function(opts) {
		// Set the options.
		opts = $.extend({}, $.fn.cvloader.defaults, opts||{});
		// Go through the matched elements and return the jQuery object.
		return this.each(function() {
			new p.model($(this),opts);
		});
	};
	/** 
	 * cvloader的默认配置
	 * @public
	 * @name $.fn.cvloader.defaults
	 */
	$.fn.cvloader.defaults = {
		height:32, //height of the loader
		txtHeight:82,//height of the tip text
		color:[51, 51, 51], //color of the loader
		txt:null, //loading text
		font:'14px "Microsoft YaHei",Helvetica',
		textBaseline:'middle',
		fillStyle:'#646464',
		autoRun:false,
		numPetal:10 //菊花花瓣数目
	};
	/** 
	 * 从指定的dom上移除cvloader
	 * @public
	 * @function
	 * @name $.fn.cvloader.Detach
	 * @param {Object} $t 指定的jq dom对象
	 * @param {Boolean} forever 是否销毁cvloader对象
	 */
	$.fn.cvloader.Detach = function($t,forever){
		var canvas=null;
		if(!(canvas=$t.data("spinner")) ){
			return;
		}
		forever=forever||false;

		canvas.stop();
		if(forever){
			$t.removeData("spinner");
			$t.find("canvas").remove();
		}
	};
	/** 
	 * 对指定的dom，如果它有对应的cvloader对象，则重新启动改对象
	 * @public
	 * @function
	 * @name $.fn.cvloader.Restart
	 */
	$.fn.cvloader.Restart = function($t){
		var canvas=null;
		if(!(canvas=$t.data("spinner")) ){
			return;
		}
		canvas.stop();
		canvas.start();
	};

})(jQuery);